<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        default-active="2"
        :default-openeds="['Aside-Child-1']"
        class="el-menu-vertical-demo"
      >
        <el-menu-item
          v-for="item in MainAside"
          :key="item.path"
          :index="item.path"
          @click="navigateTo(item.path)"
          :class="item.path === route.path ? 'select-item' : ''"
        >
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <el-sub-menu index="Aside-Child-1" v-if="ChildAside.length > 0">
          <template #title>
            <span
              style="
                font-weight: 600;
                margin-left: -10px;
                border-bottom: 1px solid #eee;
              "
              >采购报表</span
            >
          </template>
          <el-menu-item
            style="background-color: #f3f7fd"
            v-for="item in ChildAside"
            :key="item.path"
            @click="navigateTo(item.path)"
            :index="item.path"
            :class="item.path === route.path ? 'select-item' : ''"
          >
            <span>{{ item.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-main><router-view></router-view></el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
/* 
  采购管理
*/
const routes = useRouter()
  .getRoutes()
  .filter((item) => item.path.includes("/purchasingManagement/"));

const MainListAside = routes.filter((item) => item.meta.layoutType === "Aside");
const MainAside = ref(MainListAside);

const ChildListAside = routes.filter(
  (item) => item.meta.layoutType === "Aside-Child"
);
const ChildAside = ref(ChildListAside);

const routerPath = useRouter(); // useRouter 不能放在函数中执行
function navigateTo(params: string) {
  routerPath.push(params);
}
</script>
<style lang="less" scoped>
.el-container {
  width: 100%;
  height: calc(100%);

  .el-menu {
    height: calc(100%);
    background-color: #f3f7fd;
    padding-top: 30px;
    border: none;

    .el-menu-item {
      border-bottom: 1px solid #eee;
    }

    .el-menu-item:hover {
      background-color: #f3f7fd;
    }

    :deep(.select-item) {
      background-color: #eae9ff;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      border-right: 3px solid rgba(104, 96, 255, 1);

      span {
        color: rgb(104, 96, 255);
      }
    }

    .select-item:hover {
      background-color: #eae9ff;
    }
  }

  .el-main {
    padding: 15px;
    :deep(.caigou_dialog) {
      float: right;
      --el-dialog-width: 70% !important;
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-dialog__body {
        height: calc(100%);
      }
    }
  }
}
</style>
